<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>个人信息 - 8282管理系统</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="8282管理系统,egg.js,Bootstrap,JQ,node.js,后台模板,后台管理系统">
<meta name="description" content="8282管理系统是基于Egg.js+LightYear构建的后台管理系统。">
<meta name="author" content="cadcamzy">
<link href="/public/css/bootstrap.min.css" rel="stylesheet">
<link href="/public/css/materialdesignicons.min.css" rel="stylesheet">
<link href="/public/css/style.min.css" rel="stylesheet">
</head>
  
<body>
<div class="container-fluid p-t-15">
  
  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-body">
          
          <div class="edit-avatar">
            <img src="{{ user.photo }}" alt="..." class="img-avatar" id="photo_img">
            <div class="avatar-divider"></div>
            <div class="edit-avatar-content">
              <div class="hidden"><input type="file" name="photo_file" id="photo_file" /></div>
              <button class="btn btn-default" id="upload_photo">修改头像</button>
              <p class="m-0">选择一张你喜欢的图片，裁剪后会自动生成264x264大小，上传图片大小不能超过2M。</p>
            </div>
          </div>
          <hr>
          <div class="site-form">
            <div class="form-group">
              <label for="account">账号</label>
              <input type="text" class="form-control" id="account" value="{{ user.account }}" disabled="disabled" />
            </div>
            <div class="form-group">
              <label for="name">姓名</label>
              <input type="text" class="form-control" name="name" id="name" placeholder="输入您的昵称" value="{{ user.name }}">
            </div>
            <div class="form-group">
              <label for="phone">电话</label>
              <input type="text" class="form-control" name="phone" id="phone" aria-describedby="phoneHelp" placeholder="请输入正确的电话号码" value="{{ user.phone }}">
              <small id="phoneHelp" class="form-text text-muted">请保证您填写的电话是正确的。</small>
            </div>
            <div class="form-group">
              <label for="email">邮箱</label>
              <input type="email" class="form-control" name="email" id="email" aria-describedby="emailHelp" placeholder="请输入正确的邮箱地址" value="{{ user.email}}">
              <small id="emailHelp" class="form-text text-muted">请保证您填写的邮箱地址是正确的。</small>
            </div>
            <div class="form-group">
              <label for="description">简介</label>
              <textarea class="form-control" name="description" id="description" rows="3">{{ user.description }}</textarea>
            </div>
            <button type="button" class="btn btn-primary" id="submitForm">保存</button>
            <input type="hidden" id="photo" name="photo" value="{{ user.photo }}"/>
          </div>
 
        </div>
      </div>
    </div>
    
  </div>
  
</div>

<script type="text/javascript" src="/public/js/jquery.min.js"></script>
<script type="text/javascript" src="/public/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/public/js/main.min.js"></script>
<script>
  $("#upload_photo").click(function(){
    $("#photo_file").trigger('click');
  });

  $("#photo_file").on('change', function() {
    let formData = new FormData();
    formData.append('image', $("#photo_file")[0].files[0]);

    $.ajax({
      url: '/api/home/uploadFile',
      data: formData,
      method: 'post',
      contentType: false,
      processData: false,
      success: function (data, status) {
        if (data.code == '200') {
            // 这里的状态显示有自定义样式区分，做单行的更新
            const url = data.data;
            $("#photo_img").attr('src', url);
            $("#photo").val(url);
        } else {
            parent.lightyear.notify(data.msg, 'danger', 3500, 'mdi mdi-emoticon-dead', 'top', 'center');
        }
      },
      error: function () {
          parent.lightyear.notify('获取指定数据失败, 请稍后尝试！', 'danger', 3500, 'mdi mdi-emoticon-dead', 'top', 'center');
      }
    })
  })

$("#submitForm").click(function() {
  const puturl = "/profile/{{ user.id }}";
  const data = {
    name: $("#name").val(),
    phone: $("#phone").val(),
    email: $("#email").val(),
    description: $("#description").val(),
    photo: $("#photo").val()
  };

  $.ajax({
    type: "put",
    url: puturl,
    data: data,
    dataType: 'json',
    success: function (res, status) {
        if (res.code == '200') {
            // 这里的状态显示有自定义样式区分，做单行的更新
            parent.lightyear.notify(res.msg, 'success', 3500, 'mdi mdi-emoticon-happly', 'top', 'center');
            $(".img-avatar", parent.document).attr('src', data.photo);
            $(".img-avatar", parent.document).next().html(`${data.name} <span class="caret"></span>`);
        } else {
            parent.lightyear.notify(res.msg, 'danger', 3500, 'mdi mdi-emoticon-danger', 'top', 'center');
        }
    },
    error: function () {
        parent.lightyear.notify('修改失败，请稍后再试', 'danger', 3500, 'mdi mdi-emoticon-danger', 'top', 'center');
    }
  });
})


</script>


</body>
</html>